<template>
    <div class="content-in">
        <div class="left-in" :class="{ lefttop: !istop }">
            <a href="#" :class="{ abianhuan: damoxingzizhan.status }" @click="listActive(12)">
                <span class="iconfont" :class="damoxingzizhan.iconclass"></span>
                {{ damoxingzizhan.name }}
                <span class="iconfont aspan1 icon-xiangyoujiantou"></span>
            </a>
            <div class="xiahuaxian2"></div>
            <a href="#" v-for="item in leftList" :key="item.id" :class="{ abianhuan: item.status }"
                @click="listActive(item.id)">
                <span class="iconfont" :class="item.iconclass"></span>
                {{ item.name }}
            </a>
        </div>
        <Content_in :items="datalist" :key="key" :newitems="newdatalist"></Content_in>
        <div class="right-in">
            <Timehello></Timehello>
            <Wenzhangbang :class="{ wenzhangbangactive: isactive }"></Wenzhangbang>
            <div class="wenzhangimg">
                <Guanggao v-for="item in imgdata" :imgurl="item.imgurl" :imgid="item.imgid" @close="handleClose"
                    v-show="item.isshow">
                </Guanggao>
            </div>
            <Zuozhebang :class="{ zuozhebangactive: isactive }"></Zuozhebang>
            <Tuijianhuati></Tuijianhuati>
            <Banquan></Banquan>
        </div>
    </div>
    <Youxia></Youxia>

</template>

<script setup lang='ts'>
import { onMounted, onUnmounted, ref } from 'vue';
import Banquan from './content_right/banquan.vue';
import Guanggao from './content_right/guanggao.vue';
import Timehello from './content_right/timehello.vue';
import Tuijianhuati from './content_right/tuijianhuati.vue';
import Wenzhangbang from './content_right/wenzhangbang.vue';
import Zuozhebang from './content_right/zuozhebang.vue';
import Content_in from './content_in.vue';
import Youxia from './youxia.vue';
import type { imgDataType, leftListType } from '../../util/data';
import { getData, getDatalist2, getimgData, getleftlist, getnewdatalist } from '@/util/getapi';

const dataLists = ref([]);
const datalist = ref([]);
const imgdata = ref<imgDataType>([]);
const leftList = ref<leftListType>([]);
const newdatalist = ref([]);
const key = ref(0);
const istop = ref(true);
const isactive = ref(false);

const damoxingzizhan = ref({
    id: 12,
    name: '大模型子站',
    status: false,
    iconclass: 'icon-lifangtilitiduomiantifangkuai2'
});

const listActive = (row: number) => {
    if (row === 12) {
        damoxingzizhan.value.status = true;
        leftList.value.forEach((item) => {
            item.status = false;
        });
        datalist.value = dataLists.value[row - 1];
        key.value = 12;
    } else {
        leftList.value.forEach((item) => {
            item.status = false;
            if (row === item.id) {
                item.status = true;
            }
        });
        damoxingzizhan.value.status = false;
        datalist.value = dataLists.value[row - 1];
        key.value = row;
    }
};

function handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop >= 500) {
        istop.value = false;
    } else {
        istop.value = true;
    }
    if (scrollTop >= 2100) {
        isactive.value = true;
    } else {
        isactive.value = false;
    }
}

const handleClose = (imgid: number) => {
    imgdata.value.forEach(item => {
        if (item.imgid == imgid) {
            item.isshow = false
        }
    })
};

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
    (async () => {
        const dataListapi1 = await getData();
        if (dataListapi1) {
            dataLists.value = dataListapi1;
        }

        const datalistapi2 = await getDatalist2();
        if (datalistapi2) {
            datalist.value = datalistapi2;
        }

        const imgdataget = await getimgData();
        if (imgdataget) {
            imgdata.value = imgdataget;
        }

        const leftlistdata = await getleftlist();
        if (leftlistdata) {
            leftList.value = leftlistdata;
        }

        const newdatalistget = await getnewdatalist();
        if (newdatalistget) {
            newdatalist.value = newdatalistget;
        }

        key.value = 3;
    })();
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped lang="scss">
@import url(../../assets/leftcontent.scss);
@import url(../../assets/rightcontent.scss);
@import url(../../assets/iconfont/iconfont.css);

.content-in {
    width: 1200px;
    display: flex;
    margin: 80px auto 0;
}

.wenzhangbangactive {
    position: fixed;
    top: 20px;
}

.zuozhebangactive {
    position: fixed;
    top: 310px;
}
</style>